<template>
  <div class="map-main">
    <div class="map-main-border">
      <div class="map-list">
        <div class="map-box">
          <div class="header">发现得早、控制得住、化解得好</div>
          <div id="map"></div>
        </div>
        <div class="list-box">
          <div class="header">各区县矛盾纠纷化解排行</div>
          <div class="selects">
            <div class="item">
              <div class="label">年度</div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  2021<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>2018</el-dropdown-item>
                  <el-dropdown-item>2019</el-dropdown-item>
                  <el-dropdown-item>2020</el-dropdown-item>
                  <el-dropdown-item>2021</el-dropdown-item>
                  <el-dropdown-item>2022</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="item">
              <div class="label">月度</div>
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  12<i class="el-icon-arrow-down el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>11</el-dropdown-item>
                  <el-dropdown-item>12</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <dv-scroll-board
            :config="config"
            style="width: 100%; height: 88%"
            class="data-v-list"
          ></dv-scroll-board>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

// 地图
export default {
  name: 'Map',
  data() {
    return {
      config: {
        header: ['地区', '调解数量', '调解成功率', '同比'],
        data: [
          ['行1列1', '行1列2', '行1列3行1列3行1列3', '行1列4'],
          ['行2列1', '行2列2', '行2列3', '行2列4'],
          ['行3列1', '行3列2', '行3列3', '行3列4'],
          ['行4列1', '行4列2', '行4列3', '行4列4'],
          ['行5列1', '行5列2', '行5列3', '行5列4'],
          ['行6列1', '行6列2', '行6列3', '行6列4'],
          ['行7列1', '行7列2', '行7列3', '行7列4'],
          ['行8列1', '行8列2', '行8列3', '行8列4'],
          ['行9列1', '行9列2', '行9列3', '行9列4'],
          [
            '行10列1',
            '行10列2',
            '行10列3',
            '行10列4行10列4行10列4行10列4行10列4行10列4'
          ]
        ],
        headerBGC: '#040949',
        oddRowBGC: '#030739',
        evenRowBGC: '#08134B',
        headerHeight: '50',
        columnWidth: [200, 200, 300, 200],
        align: ['left', 'left', 'left', 'left']
      }
    };
  },
  mounted() {
    let myChart = echarts.init(document.getElementById('map'));
    //定义一个全局变量，用来统计每个省有几个市
    let num = 0;
    //5.江西省地图
    var jiangXiMap = require('../assets/360800.json'); // 360800
    var chinaMap = require('../assets/360800.json');
    //设置初始地图
    var mapname = jiangXiMap;
    //设置省份的json 这里注意名字要和中国地图上的名字一致
    var mapJson = [
      {
        name: '江西省',
        json: jiangXiMap
      }
    ];
    //提取自动播放的代码
    function timing() {
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index
      });
      // 高亮指定的数据图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index + 1
      });
      index++;
      //判断长度是否和城市的长度一样，如果一样重新播放
      if (index > num) {
        index = -1;
      }
    }
    //加载时的文字提示
    myChart.showLoading({ text: '正在加载数据' }); //增加等待提示
    //设置开始位置（播放的位置）
    let index = -1;
    //定时播放
    var timer = setInterval(function () {
      //调用定时播放代码
      timing();
    }, 1500);
    //鼠标移入
    myChart.on('mousemove', function (e) {
      //取消定时
      clearInterval(timer);
      //取消高亮
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
      });
      //高亮鼠标移入的位置
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex
      });
    });
    //鼠标移出
    myChart.on('mouseout', function (e) {
      //取消定时
      clearInterval(timer);
      //取消高亮
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: e.dataIndex
      });
      //重新开始定时播放
      timer = setInterval(function () {
        //调用定时播放代码
        timing();
      }, 1500);
    });
    //设置初始化时间
    setTimeout(function () {
      mapInit();
    }, 500);

    //创建地图
    var mapInit = () => {
      //调用中国地图（同步）
      //获取到长度（每个省里有几个市）
      num = jiangXiMap.length;
      //调用我们通过json对象注册的地图
      echarts.registerMap('China', jiangXiMap);
      //文件加载的动画
      myChart.hideLoading();
      //判断是否为祖国地图
      if (mapname === chinaMap) {
        //设置小黄点
        var geoCoordMap = {
          新干县: [115.402794,27.747871],
          吉安县: [114.92379,27.050394],
          万安县: [114.808098,26.475198]
        };
        //设置每个区域的值
        var data = [
          { name: '新干县', value: 15 },
          { name: '吉安县', value: 80 },
          { name: '万安县', value: 20 }
        ];
        //给每个地区赋值
        var convertData = function (data) {
          //定义一个数组
          var res = [];
          //循环遍历每个区域值
          for (var i = 0; i < data.length; i++) {
            //获取坐标
            var geoCoord = geoCoordMap[data[i].name];
            //判断是否有坐标
            if (geoCoord) {
              //往数组里设置值
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
      } else {
        //这里不为中国地图所以先不设置（后面需要对市区进行标记在设置）

        //设置小黄点
        var geoCoordMap = {};
        //设置每个区域的值
        var data = [];
        //给每个地区赋值
        convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
      }

      //地图开始
      let option = {
        //设置背景颜色
        backgroundColor: '#020933',
        geo: {
          map: 'China', //地图为刚刚设置的China
          aspectScale: 0.75, //长宽比
          zoom: 1.1, //当前视角的缩放比例
          roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          itemStyle: {
            //地图区域的多边形 图形样式
            normal: {
              areaColor: '#113F7D', //地区颜色
              shadowColor: '#0A235B', //阴影颜色
              shadowOffsetX: 25, //阴影偏移量
              shadowOffsetY: 10 //阴影偏移量
            },
            emphasis: {
              areaColor: '#2D8BC9', //地区颜色
              label: {
                show: false //是否在高亮状态下显示标签
              }
            }
          }
        },
        series: [
          //数据系列
          {
            type: 'map', //地图类型
            //地图上文字
            label: {
              normal: {
                show: true, //是否显示标签
                textStyle: {
                  color: '#fff',
                  fontFamily: 'V07'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                  fontFamily: 'V07'
                }
              }
            },
            //地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                borderColor: '#277AB8',
                borderWidth: 1.5,
                areaColor: '#113F7D'
              },
              emphasis: {
                areaColor: '#113F7D',
                borderWidth: 0
              }
            },
            zoom: 1.2, //当前视角的缩放比例
            //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            roam: false,
            map: 'China' //使用中国地图
          },
          {
            //设置为分散点
            type: 'scatter',
            //series坐标系类型
            coordinateSystem: 'geo',
            //设置图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbol: 'image://',
            // //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10
            symbolSize: [10, 26],
            symbolOffset: [0, 10],
            // 气泡字体设置
            // label: {
            //   normal: {
            //     show: true, //是否显示
            //     textStyle: {
            //       color: '#fff', //字体颜色
            //       fontSize: 8 //字体大小
            //     },
            //     //返回气泡数据
            //     formatter(value) {
            //       return value.data.value[2];
            //     }
            //   }
            // },
            itemStyle: {
              normal: {
                color: '#1E90FF' //标志颜色
              }
            },
            //给区域赋值
            data: convertData(data),
            showEffectOn: 'render', //配置何时显示特效。可选：'render' 绘制完成后显示特效。'emphasis' 高亮（hover）的时候显示特效。
            rippleEffect: {
              //涟漪特效相关配置。
              brushType: 'stroke' //波纹的绘制方式，可选 'stroke' 和 'fill'
            },
            hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
            zlevel: 1 //所属图形的 zlevel 值
          }
        ]
      };      myChart.setOption(option);
    };
  },
  methods: {
    getJson(method) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'get',
          url: method,
          dataType: 'json',
          crossDomain: true,
          cache: false
        })
          .then((res) => {
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.map-main {
  height: 95%;
  width: 100%;
  padding-bottom: 20px;
}
/* 边框 */
.map-main .map-main-border {
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/center-brder.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  .map-list {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px 0px 20px;
    height: 90%;
    .map-box {
      width: 60%;
      height: 90%;
      margin-top: 30px;
      .header {
        height: 47px;
        background: #01117e;
        color: #ffffff;
        font-size: 20px;
        font-family: V07;
        font-weight: normal;
        line-height: 47px;
        text-align: center;
      }
    }
    .list-box {
      width: 40%;
      height: 90%;
      margin-top: 27px;
      .header {
        width: 100%;
        height: 52px;
        background: linear-gradient(90deg, #005eb1, #030a3d);
        color: #ffffff;
        font-size: 20px;
        font-family: V07;
        font-weight: normal;
        line-height: 52px;
        text-align: center;
      }
      .selects {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          color: #ffffff;
          font-family: V07;
          display: flex;
          flex-direction: row;
          .label {
            margin: 0px 20px;
            color: #999999;
            font-size: 22px;
          }
        }
      }
    }
  }
}

// .el-dropdown {
//   display: block;
// }
/* 下拉央视 */
.el-dropdown-link {
  font-size: 24px;
  font-family: V07;
  font-weight: normal;
  color: #ffffff;
}
.el-icon-arrow-down {
  margin-left: 10px;
}
.el-dropdown-menu {
  background: #050a49;
  border: solid 0.1px #244d5a;
  font-family: V07;
  color: #ffffff;
  font-size: 24px;
  padding: 0;
}
.el-dropdown-menu /deep/ .popper__arrow {
  display: none;
}
.el-dropdown-menu .el-dropdown-menu__item {
  color: #ffffff;
  line-height: 32px;
  padding: 0 10px !important;
  border-bottom: solid 1px #244d5a;
}
.el-dropdown-menu .el-dropdown-menu__item:nth-last-child(2) {
  border: none;
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: #050a49;
  color: #ffffff;
}

.data-v-list /deep/ .header {
  bbackground: rgba(8, 17, 130, 0.4);
  border: 1px solid #1851B3;
  border-radius: 3px;
}
#map {
  height: 100%;
  width: 100%;
}
</style>
